<template>
  <div class="card-to-list">
    <el-tabs type="border-card" v-model="activeIndex" @tab-click="tabClick">
      <el-tab-pane v-for="(item,index) in tabs" :key="index" :name="item.id+''" :label="item.name">
        <!-- 卡片 -->
        <parentCard :queryPermission="queryPermission" :editPermission="editPermission" :checkPermission="checkPermission" :releasePermission="releasePermission" :delPermission="delPermission" :cardData="cardData" :levelType="levelType" :checkStatus="checkStatus" :isQuery="isQuery" :isEdit="isEdit" :isRelease="isRelease" :isCheck="isCheck" :isDelete="isDelete" :isModel="isModel" @jumpList="jumpList" @del="del" @edit="edit" @release="release" @check="check" @changeId="changeId">
        </parentCard>

        <div class="margin-t-20 text-center" v-if="total">
          <el-pagination @current-change="changePage" :current-page.sync="searchFrom.pageIndex" :page-size="searchFrom.pageSize" layout="prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import parentCard from './parentCard'

export default {
  name: 'index',
  components: {
    parentCard
  },
  props: {
    // 查询，编辑，发布，审核，删除的权限
    queryPermission: {
      type: Object,
      default: null
    },
    editPermission: {
      type: Object,
      default: null
    },
    checkPermission: {
      type: Object,
      default: null
    },
    releasePermission: {
      type: Object,
      default: null
    },
    delPermission: {
      type: Object,
      default: null
    },
    // tabs标签页
    tabs: {
      type: Array
    },
    activeName: {
      type: [String, Number],
      default: ''
    },
    cardData: {
      type: Array,
      default () {
        return []
      }
    },
    total: {
      type: Number
    },
    levelType: {
      type: String
    },
    checkStatus: {
      type: Boolean,
      default: false
    },
    isQuery: {
      type: Boolean,
      default: true
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    isRelease: {
      type: Boolean,
      default: false
    },
    isCheck: {
      type: Boolean,
      default: false
    },
    isDelete: {
      type: Boolean,
      default: false
    },
    // 是否为模板
    isModel: {
      type: Boolean,
      default: false
    },
    // 翻页设置
    searchFrom: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      activeIndex: ''
      // searchFrom: {
      //   pageIndex: 1,
      //   pageSize: 10
      // }
    }
  },
  created () {
    this.activeIndex = this.tabs[0].id + ''
  },
  methods: {
    // 根据值返回className
    getClassName (card) {
      if (index.hasOwnProperty('children') && index.children.length) {
        return 'list-item parent-item'
      } else {
        return 'list-item child-item'
      }
    },
    // 跳转
    jumpList (id, card) {
      this.$emit('jumpList', id, card)
    },
    del (id) {
      this.$emit('del', id)
    },
    edit (id, data) {
      this.$emit('edit', id, data)
    },
    release (id, data) {
      this.$emit('release', id, data)
    },
    check (id, card) {
      this.$emit('check', id, card)
    },
    tabClick (tab) {
      this.$emit('tabClick', tab.name)
    },
    changeId (id) {
      this.$emit('changeId', id)
    },
    changePage (val) {
      this.searchFrom.pageIndex = val
      this.$emit('changePage', val)
    }
  },
  watch: {
    $route: {
      handler (val) {
        // 切换不同页面时，tab页默认显示第一个
        if (val) {
          this.activeIndex = this.tabs[0].id + ''
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.card-to-list {
  /deep/ .el-tabs {
    min-height: 530px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    .el-tabs--border-card,
    .el-tabs__content {
      box-sizing: border-box;
    }
  }
  .list-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;

    .list-item {
      border: 14px solid $lineColor;
      border-radius: 4px;
      box-sizing: border-box;
      margin: 0 20px;
      cursor: pointer;
      transition: all 0.6s;
      &:hover {
        border-color: $lineColorDark;
      }
      .title {
        margin-top: 30px;
        font-weight: bold;
        line-height: 28px;
        font-size: 16px;
      }
      .info {
        width: 80%;
        margin: 30px auto 0 auto;
        line-height: 24px;
        text-align: left;
        span {
          display: inline-block;
          width: 70px;
          text-align: right;
        }
      }
    }

    .child-item {
      width: 200px;
      height: 260px;
    }

    .parent-item {
      width: 220px;
      height: 300px;
    }
  }
}
</style>
